<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>用户注册</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png" th:href="@{/assets/i/favicon.png}">
    <link rel="apple-touch-icon-precomposed" th:href="@{/assets/i/app-icon72x72.png}">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <link rel="stylesheet" th:href="@{/assets/css/amazeui.min.css}" />
    <link rel="stylesheet" th:href="@{/assets/css/admin.css}">
    <link rel="stylesheet" th:href="@{/assets/css/app.css}">
    <script th:src="@{/assets/js/jquery.min.js}"></script>
    <script th:src="@{/assets/js/amazeui.min.js}"></script>
    <style>
        .am-form div{
            margin-bottom: 30px;
        }
        body{
            background: #334054;
            height: 100%;
        }

    </style>
</head>
<body>
<div class="am-g myapp-login">
    <div class="myapp-login-logo-block  tpl-login-max">
        <div class="myapp-login-logo-text">
            <div class="myapp-login-logo-text">
                Amaze UI<span> Register</span> <i class="am-icon-skyatlas"></i>

            </div>
        </div>

        <div class="login-font">
            <i>Register </i> or <span> Sign Up</span>
        </div>
        <div class="am-u-sm-12 login-am-center">
            <form class="am-form" style="color: white" action="/register" enctype="multipart/form-data" method="post">
                <fieldset>
                    <legend style="color: white">用户注册</legend>
                    <div class="am-form-group">
                        <label>账户:</label>
                        <input type="text"  id="name" placeholder="输入账号" name="uname"><span id="span" ></span><br>
                    </div>

                    <div class="am-form-group">
                        <label>密码:</label>
                        <input type="password"  id="pwd1" placeholder="设置密码" name="upwd1"><span id="span2"></span><br>
                    </div>

                    <div class="am-form-group">
                        <label>重复密码:</label>
                        <input type="password"  id="pwd2" placeholder="重复密码" name="upwd2"><br>
                    </div>

                    <div class="am-form-group">
                        <label>姓名:</label>
                        <input type="text" name="name" placeholder="请输入姓名"><br>
                    </div>

                    <div class="am-form-group">
                        <label>性别:</label>
                        男：<input type="radio"  name="sex"  value="男" checked/>
                        女：<input type="radio"  name="sex"  value="女" /><br><br>
                    </div>

                    <div class="am-form-group">
                        <label>生日:</label>
                        <input type="text" name="age" placeholder="例1995.11"><br>
                    </div>

                    <div class="am-form-group">
                        <label>头像:</label>
                        <input type="file" name="file" style="color: black;width: 500px" ><br>
                    </div>
                    <p>
                        <button type="submit" class="am-btn am-btn-default" style="margin-bottom: 20px" >提交</button>
                    </p>
                </fieldset>
            </form>
        </div>
    </div>
</div>
<script>
    $('#name').blur(function () {
        var uname = this.value;
        $.ajax({
            url:"/register2",
            method:"post",
            data:{"uname":uname},
            success:function (data) {//data:服务端返回的数据
                if(data==='error'){
                    $('#span').html("<sapn style='color: red'>账号不能为空!</sapn>")
                }else {
                    if(data==='index'){
                        $('#span').html("<sapn style='color: red'>该账号已经存在!</sapn>")
                    }else {
                        $('#span').html("<span style='color: green'>该账号可以使用!</span>")
                    }
                }

            }
        })
    });
    $('#pwd2').blur(function () {
        var uname = $('#name').val();
        var upwd1 = $('#pwd1').val();
        var upwd2 = $('#pwd2').val();
        var param = {"upwd1":upwd1,"upwd2":upwd2,"uname":uname};
        $.post("/register1",param,function (data) {
            if (data==="repetition") {
                $('#span2').html("<span style='color: red'>两次输入密码不一样</span>")
            }else {
                $('#span2').html(" ")
            }
        })
    });

</script>
</body>
</html>
